<%@page import="domain.DAO.DAOFactory"%>
<%@page import="domain.DAO.DAOContact"%>
<%@page import="domain.Contact"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Main page</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
</head>
<body>
	<!-- Header -->
	<div class="container">
		<br />
		<h1 class="text-center">Modern Depiction Of Coolness</h1>
		<br />
	</div>
	<!-- Header end-->
	<!-- Navigation bar -->
	<div class="container">
		<div class="navbar alert-success col-md-12" role="navigation">

			<!-- Search bar -->
			<form class="navbar-form navbar-left" role="search" action="#"
				method="get">
				<div class="form-group">
					<!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH -->
					<input class="form-control" id="system-search" name="q"
						placeholder="Search for" required />
				</div>
			</form>

			<ul class="nav navbar-nav navbar-right">

				<!-- AddContact -->
				<li><a href="AddContact"><span
						class="glyphicon glyphicon-plus"></span> Know somebody new ? </a></li>
				<!-- Manage groups -->
				<li><a href="LoadGroups"><span
						class="glyphicon glyphicon-cog"></span> Manage my groups </a></li>
				<!-- Add Contacts from Spring -->
				<li><a data-toggle="modal" data-target="#myModal"
					class="btn btn-default alert-danger"> <span
						class="glyphicon glyphicon-cog"></span> Add Contact From Spring
				</a></li>

			</ul>
		</div>
	</div>
	<!-- Navigation bar end-->
	<!-- Body -->
	<div class="container">

		<!-- List of Contacts -->
		<div class="panel panel-success">
			<div class="panel-heading">List of contacts</div>
			<div class="panel-body">
				<table class="table table-bordered text-center">
					<thead>
						<tr class="alert-info">
							<td class="col-md-1">Type</td>
							<td class="col-md-3">Firstname</td>
							<td class="col-md-3">Lastname</td>
							<td class="col-md-3">Email</td>
							<td class="col-md-1"></td>
							<td class="col-md-1"></td>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${Contacts}" var="contact">
							<tr>
								<td><button class="btn col-md-12 btn-success disabled">Person</button></td>
								<td>${contact.firstName}</td>
								<td>${contact.lastName }</td>
								<td>${contact.email }</td>
								<td>
									<form method="get" action="ViewProfile">
										<button type="submit" class="btn btn-warning">
											<span class="glyphicon glyphicon-edit"></span> Profile
										</button>
										<input type="hidden" name="ctype" value="person" /> <input
											type="hidden" name="userid" value="${contact.id }" />
									</form>
								</td>
								<td>
									<form method="post" action="DeleteContact">
										<button type="submit" class="btn btn-danger">
											<span class="glyphicon glyphicon-remove"></span> Delete
										</button>
										<input type="hidden" name="ctype" value="person" /> <input
											type="hidden" name="userid" value="${contact.id }" />
									</form>
								</td>
							</tr>
						</c:forEach>
						<c:forEach items="${Entreprises}" var="company">
							<tr>
								<td><button class="btn col-md-12 btn-info disabled">Company</button></td>
								<td>${company.firstName}</td>
								<td>${company.lastName }</td>
								<td>${company.email }</td>
								<td>
									<form method="get" action="ViewProfile">
										<button type="submit" class="btn btn-warning">
											<span class="glyphicon glyphicon-edit"></span> Profile
										</button>
										<input type="hidden" name="ctype" value="company" /> <input
											type="hidden" name="userid" value="${company.id }" />
									</form>
								</td>
								<td>
									<form method="post" action="DeleteContact">
										<button type="submit" class="btn btn-danger">
											<span class="glyphicon glyphicon-remove"></span> Delete
										</button>
										<input type="hidden" name="ctype" value="company" /> <input
											type="hidden" name="userid" value="${company.id }" />
									</form>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<!-- Spring add contact modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">Add a
						contact</h4>
				</div>
				<div class="modal-body">
					<form class="navbar-form" action="AddContactFromSpringBean"
						method="POST">
						<div class="form-group form-vertical">
							<label class="control-label col-md-3" for="form-control">Number
								of contacts</label>
							<div class="col-md-2">
								<select class="form-control" name="num_contacts">
									<option value="1">1</option>
									<option value="25">25</option>
								</select>
							</div>
							<div class="col-md-7">
								<button type="submit" class="btn btn-success">
									<span class="glyphicon glyphicon-plus pull-left"></span>Add new
									contacts
								</button>
							</div>
							<input name="previous" value="manageGroups" type="hidden" />
						</div>
					</form>
					<br />
				</div>
				<div class="modal-footer"></div>
			</div>
		</div>
	</div>
	<!-- Body end -->
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/searchUtil.js"></script>
</body>
</html>